<template>
	<view class="box bg-f7">
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" @click="tabsClick" :current='current' lineHeight='4rpx' lineWidth='40rpx'
				lineColor='#000' :activeStyle="{
			            color: '#000',
			            fontWeight: 'bold',
			        }" :inactiveStyle="{
			            color: '#4d4d4d',
			        }"></u-tabs>
		</u-sticky>
		<view class="padding-30">
			<view v-if="orderList && orderList.length">

				<view class="bg-white border-radio-14 padding-l-r-20  margin-b-20" v-for="item in orderList"
					:key="item.id" @click="goDetails(item)">
					<view class="justifyContent-spaceBetween align-items-center order-id">
						<text>订单编号：{{item.order_no}}</text>
						<view v-if="item.status ==1" class="color-43">
							待付款
						</view>
						<view v-if="item.status ==2" class="color-43">
							待发货
						</view>
						<view v-if="item.status ==3" class="color-43">
							待收货
						</view>
						<view v-if="item.status ==4" class="color-43">
							待评价
						</view>
						<view v-if="item.status ==5" class="color-4d">
							已完成
						</view>
                        <view v-if="item.status ==0" class="color-333">
                            已取消
                        </view>
					</view>
					<view class="line"></view>
					<view class="order-info justifyContent-spaceBetween padding-t-b-25">
						<view class="img-box border-radio-8 ">
							<image :src="item.goods?item.goods.image: ''" mode="aspectFill"></image>
						</view>
						<view class="flex-column justifyContent-spaceBetween flex-1 margin-l-20">
							<view class='only-2 fs-30 fw-b color-0'>{{item.goods?item.goods.title:''}}</view>
							<view class="order-price align-items-center justifyContent-spaceBetween">
								<view class="fs-28 color-0 fw-b">
									￥ {{ item.goods?item.goods.price:''}}
								</view>
								<view class="fs-28 color-0 ">
									x {{item.count}}
								</view>
							</view>
						</view>
					</view>
					<view class="line"></view>
					<view class="align-items-center order-total padding-t-b-20">
						<view class="flex-1"></view>
						<view>
							合计： <text> {{item.order_amount_total}}</text>
						</view>
					</view>
					<view class="btn-box align-items-center">
						<view class="btn-box">查看订单</view>
						<view class="btn-box btn-pay margin-l-20" v-if="item.status ==1">去付款</view>
						<view class="btn-box btn-pay margin-l-20" v-if="item.status ==3"
							@click.stop="confirmOrder(item)">确认收货</view>
						<view class="btn-box btn-pay margin-l-20" v-if="item.status ==4" @click.stop="comment(item)">评论
						</view>
					</view>
				</view>
			</view>
			<view v-else class="bg-white" style="padding: 100rpx 0">
				<u-empty mode="order">
				</u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		orderList,
		confirmOrder
	} from '@/api/order'
	export default {
		data() {
			return {
				list: [{
						name: "全部",
						id: ''
					},
					{
						name: "待支付",
						id: '1'
					},
					{
						name: "待发货",
						id: '2'
					},
					{
						name: "待确认",
						id: '3'
					},
					{
						name: "待评价",
						id: '4'
					},
					{
						name: "已完成",
						id: '5'
					},
					{
						name: "已取消",
						id: '0'
					},
				],
				current: 0,
				page: 1,
				orderList: [],
				type: '',
				isMore: false
			}
		},
		onLoad(e) {
			this.list.map((item, index) => {
				if (item.id == e.id) {
					this.current = index
					this.type = e.id
				}
			})
			this.init()
		},
		onShow() {
			this.init()
		},
		//上拉加载函数
		onReachBottom() {
			if (this.isMore) {
				setTimeout(() => {
					this.getOrder()
				}, 100)
			} else {
				uni.showToast({
					title: '暂无更多',
					icon: 'none'
				})
			}

		},
		onPullDownRefresh() {
			//刷新初始化数据
			this.init()
			//关闭刷新动画
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			tabsClick(e) {
				this.type = e.id
				this.init()
			},
			init() {
				this.page = 1
				this.orderList = []
				this.isMore = true
				this.getOrder()
			},
			getOrder() {
				orderList({
					page: this.page,
					limit: 10,
					status: this.type
				}).then(res => {
					if (res.code == 1) {
						this.orderList = this.orderList.concat(res.data)
						if (res.data && res.data.length > 9) {
							this.isMore = true
							this.page++
						} else {
							this.isMore = false
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			// 确认订单
			confirmOrder(item) {
				let that = this
				uni.showModal({
					confirmText: '确认收货',
					showCancel: true,
					title: '确认收货',
					content: `确认已经收到${item.goods.title}`,
					success(e) {
						if (e.confirm) {
							confirmOrder({
								order_id: item.id
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: "确认收货成功",
										icon: 'none'
									})
									that.init()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})

			},
			goDetails(item) {
				uni.navigateTo({
					url: '/pageA/mine/order/details?id=' + item.id
				})
			},
			comment(item) {
				uni.navigateTo({
					url: '/pageA/mine/order/comment?id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-id {
		height: 80rpx;
		font-size: 26rpx;
		color: #333;
	}

	.order-info {
		.img-box {
			width: 120rpx;
			height: 120rpx;
			min-width: 120rpx;

			image {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}

	.order-total {
		height: 82rpx;
		font-size: 28rpx;
		color: #000;

		text {
			font-weight: bold;
		}
	}

	.btn-box {
		justify-content: flex-end;
		padding-bottom: 25rpx;

		.btn-box {
			width: 180rpx;
			height: 60rpx;
			border-radius: 30rpx;
			border: 1px solid #DBDBDB;
			text-align: center;
			line-height: 60rpx;
			font-size: 26rpx;
			color: #4d4d4d;
		}

		.btn-pay {
			background: #EFFBFE;
			border: 1px solid #43ABC4;
		}
	}
</style>